<template>
    <v-app>
        <v-main>
            <div class="page-wrapper" align="center">
                <div class="bar-wrapper">
                    <v-btn variant="plain" width="250px" :ripple="false" @click="back()">
                        <v-icon icon="mdi-chevron-left" size="40"></v-icon>
                        放弃编辑...
                    </v-btn>
                </div>
                <div style="height: 80%;width: 100%;display: flex;padding-left: 10%;padding-right: 5%;">
                    <mavon-editor ref="md" style="height: 100%;width: 75%;" placeholder="写些什么吧..." :toolbars="toolbars"
                        @imgAdd="upLoadBlogImage" v-model="markdownContent" />
                    <div style="width: 5%;"></div>
                    <div
                        style="height: 100%; width: 25%; display: flex; flex-direction: column; align-items: space-between;">
                        <div style="margin-bottom: auto;">
                            <v-text-field variant="solo" placeholder="博客标题..." v-model="title"></v-text-field>
                            <v-textarea variant="solo" placeholder="博客摘要..." v-model="abstract"></v-textarea>
                        </div>
                        <span v-if="selectedPicture" @click="deletePictureSelected()"
                            style="display: flex;justify-content: end;color: gray;text-decoration: underline;user-select: none;cursor: pointer;">点我删除</span>
                        <div style="width: 100%; height: 30%; background-color: white;cursor: pointer;"
                            @click="openPictureInput()">
                            <span style="display: flex;padding: 5%;color: #9E9E9E;font-size: 15px;"
                                v-if="!selectedPicture">添加主题图片...</span>
                            <v-img height="100%" width="100%" cover :src="picture" v-else></v-img>
                            <v-file-input v-model="selectedPicture" accept="image/*" hide-details ref="fileInput"
                                style="display: none" @change="displayPicture()"></v-file-input>
                        </div>
                    </div>
                </div>
                <div class="bottom-bar">
                    <v-btn variant="plain" width="200px" :ripple="false" @click="publishBlog">
                        保存并发布
                        <v-icon icon="mdi-chevron-right" size="40"></v-icon>
                    </v-btn>
                </div>
            </div>
        </v-main>
    </v-app>
</template>
<script setup lang="ts">
import { UpLoadBlogImage, PublishBlog } from '@/controllers/blogController';
import router from '@/router';
import { message, messageConfirm } from '@/utils/message';
import { onMounted } from 'vue';
import { ref, } from 'vue'
let picture = ref('')
let selectedPicture = ref(undefined as any)
let md = ref()
let markdownContent = ref('')
let title = ref('')
let abstract = ref('')

//获取markdown中大标题
const regex = /^#\s+(.*)/m
const pictureInput = ref()
const toolbars = {
    bold: true, // 粗体
    italic: true, // 斜体
    header: true, // 标题
    underline: true, // 下划线
    strikethrough: true, // 中划线
    mark: true, // 标记
    superscript: true, // 上角标
    subscript: true, // 下角标
    quote: true, // 引用
    ol: true, // 有序列表
    ul: true, // 无序列表
    link: true, // 链接
    imagelink: true, // 图片链接
    code: true, // code
    table: true, // 表格
    help: true, // 帮助
    undo: true, // 上一步
    redo: true, // 下一步
    navigation: true, // 导航目录
    alignleft: true, // 左对齐
    aligncenter: true, // 居中
    alignright: true, // 右对齐
    subfield: true, // 单双栏模式
    preview: true, // 预览
}

onMounted(() => {
    pictureInput.value = document.querySelector('.v-file-input input[type="file"]');
})
const openPictureInput = () => {
    if (pictureInput.value) {
        pictureInput.value.click()
    }
}
function deletePictureSelected() {
    selectedPicture = ref(undefined)
    picture.value = ''
}
function displayPicture() {
    if (selectedPicture.value && selectedPicture.value.length > 0) {
        picture.value = URL.createObjectURL(selectedPicture.value[0])
    }
}
function back() {
    messageConfirm('确认放弃编辑吗？').then(
        () => {
            router.back()
        }
    ).catch(
        () => { return }
    )
}
function bigTitle(): string | null {
    const match = markdownContent.value.match(regex);
    return match ? match[1] : null;
}
async function upLoadBlogImage(pos: number, img: File) {
    try {
        const url = await UpLoadBlogImage(img)
        md.value.$img2Url(pos, url)
        message('图片上传成功', 'success')
    }
    catch (error: any) {
        message(error.message, 'error')
    }
}
async function publishBlog() {
    const header = title.value ? title.value : (bigTitle() ? bigTitle() : '')
    if (header === '' || !header) {
        message('标题不能为空')
        return
    }
    if (markdownContent.value === '') {
        message('正文不能为空')
        return
    }
    try {
        await PublishBlog(header, markdownContent.value, abstract.value, selectedPicture.value[0])
        message('发布成功', 'success')
        setTimeout(() => {
            router.push('/blog')
        }, 1000)
    }
    catch (error: any) {
        message(error.message, 'error')
    }
}
</script>
<style scoped>
.page-wrapper {
    height: 100%;
    width: 100%;
    background-image: url('https://img.freepik.com/free-photo/abstract-sequins-with-copy-space_23-2148346546.jpg?w=996&t=st=1701848074~exp=1701848674~hmac=842b2ecbf65851ce188bdbec4f27c8bfb37fd8cef33bcda6c4b174b84b514ecf');
    background-size: cover;
    background-repeat: repeat;
    position: absolute;
}

.bar-wrapper {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;

}

.bottom-bar {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: end;
}
</style>